<script lang="ts" setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { ref } from "vue";
import { addRule } from "@/api/ie";
import { useNav } from "@/layout/hooks/useNav";
const { username, logout } = useNav();

const tableData = ref([
  {
    info: "时间",
    description: "文本中的时间信息"
  },
  {
    info: "地点",
    description: "文本中的地点信息"
  },
  {
    info: "示例抽取内容",
    description: "示例描述信息（描述信息不会影响抽取效果）"
  }
]);

const deleteRow = (index: number) => {
  tableData.value.splice(index, 1);
};

const showAddDialog = ref(false);
const info = ref("");
const description = ref("");

const closeAddDialog = () => {
  showAddDialog.value = false;
  info.value = "";
  description.value = "";
};

const confirmAddDialog = () => {
  if (info.value === "") {
    ElMessage({
      type: "error",
      message: "未提供抽取内容"
    });
    return;
  }
  showAddDialog.value = false;
  tableData.value.push({
    info: info.value,
    description: description.value
  });
  info.value = "";
  description.value = "";
};

const submitRule = () => {
  ElMessageBox.prompt("请输入标题信息", "最后一步", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    inputErrorMessage: "错误的标题信息"
  })
    .then(({ value }) => {
      addRule({
        username: username.value,
        title: value,
        rules: tableData.value
      })
        .then(res => {
          if (res["code"] == 0) {
            ElMessage({
              type: "success",
              message: `完成对规则 ${value} 的导入`
            });
          } else {
            ElMessage({
              type: "error",
              message: res["detail"]
            });
          }
        })
        .catch(error => {
          console.log(error);
          if (error.response?.status == 401) {
            ElMessage({
              type: "error",
              message: "登录过期"
            });
            logout();
          }
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Input canceled"
      });
    });
};
</script>

<template>
  <div>
    <el-table :data="tableData" max-height="350">
      <el-table-column prop="info" label="抽取的信息" />
      <el-table-column prop="description" label="内容描述" />
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="deleteRow(scope.$index)"
          >
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button
      class="mt-4"
      type="primary"
      plain
      style="width: 100%"
      @click="showAddDialog = true"
    >
      添加 </el-button
    ><br /><el-button
      class="mt-4"
      type="success"
      plain
      style="width: 100%"
      @click="submitRule"
    >
      保存
    </el-button>

    <el-dialog
      :before-close="closeAddDialog"
      v-model="showAddDialog"
      title="输入"
      width="600"
    >
      抽取内容<b>（必填）</b>：<el-input v-model="info" /> 详细描述：<el-input
        v-model="description"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="danger" @click="closeAddDialog">取消</el-button>
          <el-button type="primary" @click="confirmAddDialog"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
